<template>
    <div style="padding-left: 17px;">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-document"></i> 系统监控
                </el-breadcrumb-item>
                <el-breadcrumb-item>系统日志</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="container">
            <div class="handle-box">
                <el-input v-model="search" placeholder="请输入相关信息" class="handle-input mr10"></el-input>
                <el-button icon="el-icon-search" circle style=" margin-right: 10px;"></el-button>
            </div>
            <el-table
                :data="tables.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column label="ID" type="index" width="65" align="center"></el-table-column>
                <el-table-column prop="uid" label="用户角色" align="center">
                    <template slot-scope="scope">
                        <el-tag
                            :formatter="formatSex(scope.row,tableData,scope.row.uid)"
                            :type="scope.row.uid=='公司'?'success':(scope.row.uid=='机构'?'warning':(scope.row.uid=='客服'?'':''))"
                        >{{scope.row.uid}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="操作者" align="center"></el-table-column>
                <el-table-column prop="title" label="操作事件" align="center"></el-table-column>
                <el-table-column prop="desc" label="事件说明" align="center"></el-table-column>
                <el-table-column prop="state" label="状态" align="center">
                    <template slot-scope="scope">
                        <el-tag
                            :formatter="formatSex(scope.row,tableData,scope.row.state)"
                            :type="scope.row.state=='成功'?'success':(scope.row.state=='失败'?'danger':'')"
                        >{{scope.row.state}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="事件类型" align="center"></el-table-column>
                <el-table-column prop="time" label="操作时间" align="center"></el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 15, 20, 25, 30]"
                    :page-size="pagesize"
                    :total="tables.length"
                    layout="total, sizes, prev, pager, next, jumper"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import Qs from 'qs';
import { fetchData } from '../../api/index';
export default {
    data() {
        return {
            tableData: [],
            id: -1,
            search: '',
            currentPage: 1,
            pagesize: 10
        };
    },
    created() {
        this.$http
            .post(
                '/api/api/user/log',
                Qs.stringify({
                    name: $cookies.get('tokenuser'), //用户账号
                    form: $cookies.get('tokenform'), //用户身份（0公司 1机构 2客服）
                    token: $cookies.get('tokenpa').token //当前登录令牌
                }),
                { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
            )
            .then(obtain => {
                if (obtain.body.code == 200) {
                    this.tableData = obtain.body.data;
                } else {
                    this.$cookies.remove('tokenpa'); //删除账号
                    this.$cookies.remove('tokenpower'); //删除用户身份
                    this.$cookies.remove('tokenform'); //删除登录令牌
                    this.$cookies.remove('tokenuser'); //删除账号
                    this.$message.error({
                        message: obtain.body.msg,
                        duration: 1000,
                        onClose: function() {
                            window.location = './login';
                            //this.$router.push('/login');
                        }
                    });
                }
            })
            .catch(fail => {
                this.$message.error({
                    message: '服务器请求失败...'
                });
            });
    },
    methods: {
        //判断用户角色
        formatSex: function(row, column, cellValue) {
            if (cellValue == '0') {
                // return '在线';
                row.uid = '公司';
            } else if (cellValue == '1') {
                //return '离线';
                row.uid = '机构';
            } else if (cellValue == '2') {
                row.uid = '客服';
            }
        },

        //分页
        handleSizeChange: function(val) {
            this.pagesize = val;
        },
        handleCurrentChange: function(currentPage) {
            this.currentPage = currentPage;
        }
    },
    computed: {
        // 模糊搜索
        tables() {
            const search = this.search;
            // console.log(search);
            if (search) {
                // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
                // 注意： filter() 不会对空数组进行检测。
                // 注意： filter() 不会改变原始数组。
                return this.tableData.filter(data => {
                    // some() 方法用于检测数组中的元素是否满足指定条件;
                    // some() 方法会依次执行数组的每个元素：
                    // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
                    // 如果没有满足条件的元素，则返回false。
                    // 注意： some() 不会对空数组进行检测。
                    // 注意： some() 不会改变原始数组。
                    return Object.keys(data).some(key => {
                        // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
                        // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
                        return (
                            String(data[key])
                                .toLowerCase()
                                .indexOf(search) > -1
                        );
                    });
                });
            }
            return this.tableData;
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
